<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>美颜相机主页</title>
  <meta name="keywords" id="keywords" content="美颜相机,美颜相机APP,BeautyCam" />
  <meta name="description" id="description"
    content="随时随地拥有好气色的拍照神器【美颜相机APP】，拍照期间实时美颜修图，量身打造你的美。下载美颜相机，带你体验潮流发型，拍摄电影级大片，做世界焦点，释放不一样的自己！" />
  <!-- 引入base.css -->
  <link rel="stylesheet" href="./css/base.css" />
  <!-- 引入index.css -->
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/swiper.min.css" />
  <script src="./js/swiper.min.js"></script>
  <script src="./js/jquery-3.5.1.min.js"></script>
  <script src="./js/index.js"></script>
</head>

<body>
  <!-- 头部部分开始 -->
  <header class="header">
    <a href="#" name="#top"></a>
    <div class="w">
      <div class="header_left">
        <!-- logo部分 -->
        <div class="logo">
          <a href="index.html">
            <h1>美图秀秀</h1>
          </a>
        </div>
        <ul class="top-bar">
          <li><a href="index.html">企业网站</a></li>
          <li><a href="meiTuAI.index.html">美图AI开放平台</a></li>
          <li class="xiala">
            <a href="#">App</a> <span></span>
            <div class="items">
              <div><a href="meiTuXiuXiu.index.html">美图秀秀</a></div>
              <div><a href="#">美颜相机</a></div>
              <div><a href="meiPai.index.html">美拍</a></div>
              <div><a href="index.html">了解更多产品</a></div>
            </div>
          </li>
          <li class="xiala">
            <a href="#">智能硬件</a><span></span>
            <div class="items">
              <div><a href="#">美图智能手机</a></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="header_right">
        <a href="#">简体中文</a>

        <div class="items"></div>
      </div>
    </div>
  </header>
  <!-- 头部部分结束 -->

  <!-- nav部分开始 -->
  <nav class="nav">
    <a href="javascript:;" name="a"></a>

    <div class="w">
      <div class="nav-logo">
        <img src="./images/logomeiyan.png" alt="" />
      </div>
      <ul class="contains">
        <li><a href="#a" class="class-current">关于我们</a></li>
        <li><a href="#huodong">最新活动</a></li>
        <li><a href="#jieshao">功能介绍</a></li>
        <li><a href="#pingjia">用户评价</a></li>
      </ul>
      <div class="download">
        <a href="#xiazai">立即下载</a>
      </div>
    </div>
  </nav>
  <!-- nav部分结束 -->

  <!-- 美女部分开始 -->
  <div class="kv-img clearfix">
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./images/kv_content_img01.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./images/kv_content_img02.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./images/kv_content_img03.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./images/kv_content_img04.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="bg">
      <div class="xiazai">
        <img src="./images/kv_logo.png" alt="" />
        <div class="down">
          <a href="#"> 了解更多 </a><a href="#xiazai">立即下载</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 美女部分结束 -->

  <!-- 最新活动开始 -->
  <div class="new">
    <a href="javascript:;" name="huodong"></a>
    <div class="w">
      <div class="bg1">
        <div class="title">
          <img src="./images/new.png" alt="" />
        </div>
        <div class="items">
          <div>
            <div class="icon">
              <img src="./images/new_icon.png" alt="" />
            </div>
            <img src="./images/pic01.jpg" alt="" />
            <span>热门活动</span><i>2020.08.25</i>
            <p>美颜相机动漫大头贴<br />超萌赵小兔引爆全网</p>
            <span>2020.08.25. 活动</span>
          </div>
          <div>
            <img src="./images/pic02.jpg" alt="" />
            <span>热门活动</span><i>2020.08.25</i>
            <p>美颜相机动漫大头贴<br />超萌赵小兔引爆全网</p>
            <span>2020.08.25. 活动</span>
          </div>
          <div>
            <img src="./images/pic03.jpg" alt="" />
            <span>热门活动</span><i>2020.08.25</i>
            <p>美颜相机动漫大头贴<br />超萌赵小兔引爆全网</p>
            <span>2020.08.25. 活动</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 最新活动结束 -->

  <!-- 功能介绍模块开始 -->
  <div class="features">
    <a href="javascript:;" name="jieshao"></a>
    <div class="w">
      <div class="bg2">
        <div class="features-title">
          <img src="./images/gongnegn.jpg" alt="" /> <br />
          <span>六大特点一次了解</span>
        </div>
        <div class="features-content">
          <div class="content-left">
            <div class="button class-current">
              <div class="btn-icon"></div>
              <h4>一键美颜</h4>
              <p>
                自拍超完美的小秘密 <br />
                一秒拥有好气色
              </p>
            </div>
            <div class="button">
              <div class="btn-icon"></div>
              <h4>动漫大头贴</h4>
              <p>
                自拍也卖萌 <br />
                一键变身漫画主人公
              </p>
            </div>
            <div class="button">
              <div class="btn-icon"></div>
              <h4>视频美颜</h4>
              <p>
                首创视频美颜拍 <br />
                视频也能美美哒
              </p>
            </div>
          </div>
          <div class="content-center">
            <div class="video" style="display: block">
              <video src="./images/01.webm" autoplay muted loop></video>
            </div>
            <div class="video">
              <video src="./images/02.webm" autoplay muted loop></video>
            </div>
            <div class="video">
              <video src="./images/03.webm" autoplay muted loop></video>
            </div>
            <div class="video">
              <video src="./images/04.webm" autoplay muted loop></video>
            </div>
            <div class="video">
              <video src="./images/05.webm" autoplay muted loop></video>
            </div>
            <div class="video">
              <video src="./images/06.webm" autoplay muted loop></video>
            </div>
          </div>
          <div class="content-right">
            <div class="button">
              <div class="btn-icon"></div>
              <h4>瘦脸瘦身</h4>
              <p>
                手动调节细节 <br />
                轻松拥有小V脸
              </p>
            </div>
            <div class="button">
              <div class="btn-icon"></div>
              <h4>高级揉焦</h4>
              <p>
                多款背景虚化效果 <br />
                让你成为人群中的焦点
              </p>
            </div>
            <div class="button">
              <div class="btn-icon"></div>
              <h4>缩小鼻翼</h4>
              <p>
                迷人魅力轻松调 <br />
                无关立体更集中
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 功能介绍模块结束 -->

  <!-- 用户评价模块开始 -->
  <div class="reviews">
    <a href="javascript:;" name="pingjia"></a>
    <div class="bj3">
      <div class="reviews-title">
        <img src="./images/reviewslogo.jpg" alt="" /><br />
        <span>双平台一致推荐</span>
      </div>
      <div class="reviews-content">
        <ul class="clearfix">
          <li>
            <img src="./images/review_ppl-1.jpg" alt="" />
          </li>
          <li class="text">
            <h4>01</h4>
            <p>美颜相机真强大!界面简单~超容易上手!</p>
            <p class="xie">Celia</p>
          </li>
          <li>
            <img src="./images/review_ppl-3.jpg" alt="" />
          </li>
          <li class="text">
            <h4>03</h4>
            <p>颜相相机七级美颜真的很强大！</p>
            <p class="xie">Tiffany</p>
          </li>
          <li class="text r">
            <h4>03</h4>
            <p>
              修的好自然! <br />
              一秒变女神❤
            </p>
            <p class="xie">Candy wu</p>
          </li>
          <li>
            <img src="./images/review_ppl-2.jpg" alt="" />
          </li>
          <li class="text r">
            <h4>04</h4>
            <p>用了美颜相机就不想用别的拍照APP了！</p>
            <p class="xie">Rosen</p>
          </li>
          <li>
            <img src="./images/review_ppl-4.jpg" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 用户评价模块结束 -->

  <!-- 下载模块开始 -->
  <div class="downloaded">
    <a href="javascript:;" name="xiazai"></a>
    <div class="bj4">
      <div class="downloaded-title">
        <img src="./images/downloadlogo.jpg" alt="" /><br />
        <span>
          选择适合你的手机系统 <br />
          立即免费下载
        </span>
      </div>
      <div class="downloaded-content clearfix">
        <div class="downloaded-content-left">
          <img src="./images/download_ppl.png" alt="" />
        </div>
        <div class="downloaded-content-right">
          <div class="android">
            <img src="./images/get_app_android.png" alt="" />
            <span>
              <img src="./images/get_app_android_btn_on.png" alt="" />
            </span>
          </div>
          <div class="ios">
            <img src="./images/get_app_ios.png" alt="" />
            <span>
              <img src="./images/get_app_ios_btn_on.png" alt="" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 下载模块结束 -->

  <!-- 底部部分开始 -->
  <footer class="footer">
    <div class="footer-content">
      <div class="copyright">
        <span>©2020 meitu</span>
        <a href="#" class="copyrighta">用户协议</a>
        <a href="#" class="">个人信息保护政策</a>
      </div>
      <div class="copyright1">
        <span>©2020 厦门鸿天创视科技有限公司版权所有</span>
        <a href="#">增值电信业务经营许可证：闽B2-20160104</a>
        <a href="#">网络文化经营许可证：闽网文 [ 2016 ] 3677-063号</a>
      </div>
    </div>
    <div class="top">
      <a href="#top">
        <p>top</p>
      </a>
    </div>
  </footer>
  <!-- 底部部分结束 -->
</body>
<script>
  var swiper = new Swiper(".swiper-container", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    loop: true,
  });
</script>

</html>